import React from 'react';
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
// import User from './components/User';

// type关键字自定义类型
type userInfo = { name: string, age: number, sex: string }
type getInfo = { score: number, win: boolean }
type num = { n: number }
type ArticleInfo = {
  title: string,
  content: string
}
// React.FC函数组件类型 
// 泛指FC组件内部props{} 是userInfo类型
const User: React.FC<getInfo> = (
  { score, win }
) => { //规定返回值是组件类型
  return (
    <>
      <p>{score}</p>
      <p>{win}</p>
      {/* <p>{sex}</p> */}
    </>
  )
}
const Counter: React.FC<num> = ({ n }) => {
  const [count, setCount] = useState(n)
  return (
    <>
      <div>
        {count}
      </div>
      <button onClick={() => setCount(count + 1)}>加</button>
      <button onClick={() => setCount(count - 1)}>减</button>
    </>
  )
}

const Article: React.FC<ArticleInfo> = ({title,content}) => {
  return (
    <article>
      <header>
        <h1>{title}</h1>
      </header>
      <main>
        {content}
      </main>
    </article>
  )
}

function App() {
  return (
    <>
      <Article title="标题" content="内容"></Article>
      {/* <User score={12} win={false}></User> */}
      <Counter n={1}></Counter>
    </>
  );
}

export default App;
